class List {
    constructor() {
        this.gridWrapper = document.querySelector(".grid-wrapper");
        this.url = "http://localhost:3000/data/data.json"
        this.load();
        this.addEvent();
    }
    load() {
        ajax({
            url: this.url,
            success: (res) => {
                this.res = JSON.parse(res);
                this.render()
            }
        })
    }
    render() {
        let str = "";
        for (let i = 0; i < this.res.length; i++) {
            str += `<div class="grid-war" index="${this.res[i].proId}">
            <div class="imgs">
                <a href="#">
                    <img src="${this.res[i].url}" alt="" class="clik">
                </a>
            </div>
            <div class="info-cont">
                <div class="price">
                    <span>￥</span>
                    <em>${this.res[i].price}</em>
                </div>
                <div class="title">
                    <a href="">
                        <span>${this.res[i].product_name}</span>
                        <span class="feature">父亲节新品上市</span>
                    </a>
                </div>
                <div class="operate">
                    <a href="">
                        <i class="icon-fon5"></i><em>收藏</em>
                    </a>
                    <a href="##" id="fon5">
                        <i class="icon-fon6"></i><em class = "shop">加入购物车</em>
                    </a>
                </div>
            </div>
        </div>`
        }
        this.gridWrapper.innerHTML = str;
    }
    addEvent() {

        const that = this;
        this.gridWrapper.addEventListener("click", function (eve) {
            const e = eve || window.event;
            const tar = e.target || e.srcElement;
            if (tar.className === "shop") {
                that.proId = tar.parentNode.parentNode.parentNode.parentNode.getAttribute("index")
                that.setCookie();
            }
            if (tar.className === "clik") {
                that.climg = tar.parentNode.parentNode.parentNode.getAttribute("index");
                setCookie("climg", that.climg);
                location.href = "./product_details.html";
            }
        })
    }
    setCookie() {
        this.goodsMsg = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : [];
        console.log(this.goodsMsg);
        if (this.goodsMsg.length < 1) {
            this.goodsMsg.push({
                proId: this.proId,
                num: 1
            })
        } else {
            let i = 0;
            const flag = this.goodsMsg.some((val, idx) => {
                i = idx;
                return val.proId === this.proId
            })
            console.log(this.proId);
            if (flag) {
                this.goodsMsg[i].num++
            } else {
                this.goodsMsg.push({
                    proId: this.proId,
                    num: 1
                })
            }
        }
        setCookie("goodsMsg", JSON.stringify(this.goodsMsg));
    }
}
new List;